<script setup>
import {useRoute} from 'vue-router';
import {ArrowLeft} from "@element-plus/icons-vue";
import {reactive, ref} from "vue";
import CommentItem from '@/components/CommentItem.vue'
import HomeTail from "@/components/HomeTail.vue";
import router from "@/router/index.js";
import server from "@/axios/axiosUtils.js";

const route = useRoute();
// 当前浏览的商品的id（从主页“传递”过来）
const goodsId = route.params.id;
// 购买数量
const purchaseAmount = ref(1);
// 当前浏览的商品的信息列表
const goodsInfo = reactive({
  id: goodsId,
  name: '四模连接办公/游戏兼容狼蛛(AULA)SC525无线蓝牙双模鼠标可充电鼠标RGB灯效游戏电竞笔记本电脑通用流光白【无线蓝牙双模】RGB灯效',
  price: 99,
  desc: '',
  image: ["https://img14.360buyimg.com/n0/jfs/t1/158020/6/46583/90708/6659759fFb0d0840f/b97132a9f01c6e9b.jpg.avif",
    "https://img14.360buyimg.com/n0/jfs/t1/187342/23/40094/77695/665975e4Fd6b52c2f/8270dc50f2276f35.jpg.avif"],
  level: 5,
})
// 当前展示的图片（默认第一张）
const curImg = ref(goodsInfo.image[0]);
// 评论列表
const commentsList = reactive([
  {
    level: 5,
    avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    name: "张三",
    content: "超赞，反应0延迟\n" +
        "手感超棒，综合来说很适合我这样游戏高强度玩家\n" +
        "有一种神之附体的感觉，打游戏用它，妈妈再也不用担心我被杀。",
    goodsname: "流光白【无线蓝牙双模】RGB灯效",
    image: ["https://img30.360buyimg.com/n0/s48x48_jfs/t1/221475/37/33349/226269/666a7831Fd8ac0f99/16fcf9ed1851f722.jpg",
      "https://img30.360buyimg.com/n0/s48x48_jfs/t1/185621/21/46557/87416/665c0eafFf94d4928/979c6762d986d46e.jpg"],
  },
  {
    level: 5,
    avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    name: "李四",
    content: "鼠标非常好用，很帅，还有贴纸非常建议购买。\n" +
        "反应灵敏，手感超级好",
    goodsname: "曜石黑【无线蓝牙双模】RGB灯效",
    image: ["https://img30.360buyimg.com/n0/s48x48_jfs/t1/221475/37/33349/226269/666a7831Fd8ac0f99/16fcf9ed1851f722.jpg",
      "https://img30.360buyimg.com/n0/s48x48_jfs/t1/235223/15/15362/45288/6609e390F0915f58b/d8b080fea6bfb43e.jpg"],

  }
])

//
const handleSubmit = () => {
  router.push({
    path: '/order',
    query: {
      id: goodsId,
      price: goodsInfo.price,
      amount: purchaseAmount.value
    }
  });
}

const fetchData = () => {
  let options = {
    method: "GET",
    url: "",
    params: {}
  };
  server
      .request(options)
      .then(function (response) {

      })
      .catch(function (error) {

      });
}

</script>

<template>

  <div class="app">
    <!--页头-->
    <el-page-header :icon="ArrowLeft" @click="router.back()">
      <template #title>
        <span>后退</span>
      </template>
    </el-page-header>
    <el-divider/>
    <!--商品介绍-->
    <div class="product-intro">
      <!--商品图片-->
      <div class="preview-wrap">
        <el-image :preview-src-list="goodsInfo.image" :src="curImg"/>
        <el-carousel :interval="2000" arrow="always" height="150px" type="card">
          <el-carousel-item v-for="item in goodsInfo.image" :key="item">
            <img :alt="goodsInfo.name" :src="item" class="carousel-img" @click="curImg=item"/>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!--商品信息-->
      <div class="itemInfo-wrap">
        <h3 class="product-name">{{ goodsInfo.name }}</h3>
        <!--价格-->
        <div class="price-wrap">
          <span>价格： </span>
          <span style="font-size: 20px">¥</span>
          <span style="font-size: 50px">{{ parseFloat(goodsInfo.price).toFixed(2) }}</span>
        </div>
        <!--配送-->
        <div class="delivery-wrap">
          <span style="margin-right: 10px">配送至</span>
          <el-select v-model="value" placeholder="请选择"/>
        </div>
        <el-divider/>
        <!--规格-->
        <div class="spec-wrap">
          <span>选择规格</span>
        </div>
        <el-divider/>
        <!--确认购买-->
        <div class="buy-box">
          <el-input-number
              v-model="purchaseAmount"
              :max="999"
              :min="1"
              controls-position="right"
              size="large"
          />
          <button
              class="buy-btn btn-special1 btn-lg link-instanted"
              @click="handleSubmit"
          >立即支付
          </button>
        </div>
        <span class="tip">温馨提示·支持7天无理由退货</span>
      </div>
    </div>

    <el-divider/>

    <!--商品评论-->
    <div class="product-comment">
      <!--标题栏-->
      <div class="product-comment-title">
        <b>商品评价</b>
      </div>
      <!--商品评分-->
      <div class="product-rate">
        <span>好评度</span>
        <el-rate
            v-model="goodsInfo.level"
            :colors="['#E4393C', '#E4393C', '#E4393C']"
            disabled
            score-template="{value} 分"
            show-score
            size="large"
            text-color="#E4393C">
        </el-rate>
      </div>
      <!--筛选评分-->
      <div class="comment-filter">
        <el-radio-group v-model="value">
          <el-radio-button label="全部"/>
          <el-radio-button label="好评"/>
          <el-radio-button label="中评"/>
          <el-radio-button label="差评"/>
        </el-radio-group>
      </div>
      <!--评论详细-->
      <div class="comment-wrap">
        <comment-item v-for="item in commentsList" :comment="item"/>
      </div>
      <home-tail style="zoom: 75%;height: fit-content;width: fit-content;font-size: medium;"/>
    </div>

    <!--回到顶部-->
    <el-backtop
        :bottom="20"
        :right="20"
        visibility-height="0"/>

  </div>

</template>

<style scoped>
@import "@/assets/GoodsDetail.css";
</style>